import React, { Component } from 'react';

import Flex from 'antd-mobile/lib/flex';

import 'antd-mobile/lib/flex/style/index.css';

import defaultAvatar from '../static/imgs/logo.PNG';

import { uuid } from '../utils/util';

let Member = React.createClass({
    getInitialState: function () {
        return {
            avatar: this.props.dataList.avatar,
            nickname : this.props.dataList.nickname,
            openid : this.props.dataList.openid
        };
    },

    render : function () {
        return (
            <div className="group-user-box">
                <div className="group-user-item">
                    <img src={this.state.avatar} alt="头像"/>
                </div>
                <div className="group-user-name">{this.state.nickname}</div>
            </div>
        )
    }});
class MyGroup extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            members : this.props.members,
            defaultMember : {
                avatar: defaultAvatar,
                nickname : '没有团友',
                openid : uuid(16 , 8)
            },
            groupNum : this.props.groupNum
        };

        this.defaultMember = [];
        for(let i = 0 ; i < this.props.num - this.props.members.length ; i++){
            let defaultMember = {
                avatar: defaultAvatar,
                    nickname : '没有团友',
                    openid : uuid(16 , 8)
            };
            this.defaultMember[i] = defaultMember;
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            members: nextProps.members
        });
    }

    render() {
        return (
            <div className="my-group">
                {this.state.groupNum === undefined ? '':
                    <div className="group-title">
                        第{this.state.groupNum + 1}团 {this.props.num - this.props.members.length > 0 ? ' 未满' : ' 已满'}
                    </div>
                }
                <Flex className="group-user" justify="between" wrap="wrap" align="start">
                    {
                        this.state.members.map(function (member) {
                            return <Member dataList={member}/>
                        })
                    }
                    {
                        this.defaultMember.map(function (member) {
                            return <Member dataList={member}/>
                        })
                    }
                </Flex>
            </div>
        )
    }
}

export default MyGroup;